<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登录</title>
    <link href="/css/layui.css" rel="stylesheet">
    <script src="/css/layui.js"></script>

    <style>
        * {
            padding: 0;
            margin: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            letter-spacing: .05em;
        }

        html {
            height: 100%;
        }

        body {
            height: 100%;
        }

        .container {
            height: 100%;
            /*background-image: linear-gradient(to right, #fbc2eb, #a6c1ee); 设置渐变色 */
            padding: 0;
            margin: 0;
            background: url("/images/1.jpg") no-repeat;
            background-size: 100% 100%;
        }

        .login-wrapper {
            background-color: #fff;
            width: 270px;
            height: 500px;
            position: relative;
            padding: 0 50px;
            border-radius: 15px;
            /* 设置框的居中位置也可以采用flex布局方式 */
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .login-wrapper .header {
            font-size: 30px;
            font-weight: bold;
            text-align: center;
            line-height: 120px;
        }

        .login-wrapper .form-wrapper .input-item {
            display: block;
            width: 100%;
            margin-bottom: 20px;
            border: 0;
            padding: 10px;
            border-bottom: 1px solid rgb(128, 125, 125);
            font-size: 15px;
            outline: none;
        }

        .login-wrapper .form-wrapper .input-item ::placeholder {
            text-transform: uppercase;
        }

        .login-wrapper .form-wrapper .btn {
            text-align: center;
            padding: 10px;
            margin-top: 40px;
            width: 100%;
            background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
            color: #fff;
        }

        .login-wrapper .msg {
            text-align: center;
            line-height: 80px;
        }

        .login-wrapper .msg a {
            /* 消除下划线 */
            text-decoration: none;
            text-decoration-color: unset;
            color: #a6c1ee;
        }
    </style>
</head>

<body>
<div class="container">
    <div class="login-wrapper">
        <div class="header">登录</div>
        <div class="form-wrapper">
            <form class="layui-form">

                <div class="demo-login-container">

                    <div class="layui-form-item">

                        <div class="layui-input-wrap">

                            <div class="layui-input-prefix">

                                <i class="layui-icon layui-icon-username"></i>

                            </div>

                            <input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">

                        </div>

                    </div>

                    <div class="layui-form-item">

                        <div class="layui-input-wrap">

                            <div class="layui-input-prefix">

                                <i class="layui-icon layui-icon-password"></i>

                            </div>

                            <input type="password" name="password" value="" lay-verify="required" placeholder="密   码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">

                        </div>

                    </div>

                    <div class="layui-form-item">

                        <div class="layui-row">

                            <div class="layui-col-xs7">

                                <div class="layui-input-wrap">

                                    <div class="layui-input-prefix">

                                        <i class="layui-icon layui-icon-vercode"></i>

                                    </div>

                                    <input type="text" name="captcha" value="" lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码" autocomplete="off" class="layui-input" lay-affix="clear">

                                </div>

                            </div>

                            <div class="layui-col-xs5">

                                <div style="margin-left: 10px;">

                                    <img src="https://www.oschina.net/action/user/captcha" onclick="this.src='https://www.oschina.net/action/user/captcha?t='+ new Date().getTime();">

                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="layui-form-item">

                        <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">

                        <a href="#forget" style="float: right; margin-top: 7px;">忘记密码？</a>

                    </div>

                    <div class="layui-form-item">

                        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>

                    </div>

                    <div class="layui-form-item demo-login-other">

                        <label>社交账号登录</label>

                        <span style="padding: 0 21px 0 6px;">

        <a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>

        <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a>

        <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>

      </span>

                        或 <a href="#reg">注册帐号</a>

                    </div>

                </div>

            </form>
        </div>

    </div>
</div>
</body>
<!--<script type="text/javascript">-->
<!--    //提交之前进行检查，如果return false，则不允许提交-->
<!--    function check() {-->
<!--        //根据ID获取值-->
<!--        let username = document.getElementById("username").value;-->
<!--        let password = document.getElementById("password").value;-->
<!--        if (username == "") {-->
<!--            alert("用户名不能为空");-->
<!--            return false;-->
<!--        }-->
<!--        if (password == "") {-->
<!--            alert("密码不能为空");-->
<!--            return false;-->
<!--        }-->
<!--        return true;-->
<!--    }-->
<!--</script>-->
<script>

    layui.use(['form','layer'],function(){
        var $ = layui.jquery;

        var form = layui.form;

        var layer = layui.layer;

        // 提交事件

        form.on('submit(demo-login)', function(data){

            var field = data.field; // 获取表单字段值


            // 显示填写结果，仅作演示用

            // layer.alert(JSON.stringify(field), {
            //
            //     title: '提交登录'
            //
            // });

            // 此处可执行 Ajax 等操作
            $.ajax({
                url:"http://"+window.location.host+"/user/login",
                type: 'POST',
                data: field,
                success: function (response){
                    if (response.data != null){
                        //登录成功操作
                        layer.msg('登录成功');
                        console.log("登录成功")
                        window.location.href = "templates/index.html";
                    }else{
                        //登录失败操作
                        layer.msg('用户名或密码错误!');
                    }
                },
                error: function (){
                    console.log("服务器错误,请稍后再来")
                }

            });
            // …

            return false; // 阻止默认 form 跳转

        });

    });

</script>

</html>
